<template>
  <div>
    <div id="app" v-title data-title="飞熊科技-产品介绍"></div>
    <div class="header">
      <p v-if="!flag" class="loginBtn"><el-button size="medium" type="primary" @click="Inlogin">登录</el-button></p>
      <p v-if="flag" class="loginBtn">
        <span class="spanText">用户：{{ userId }}</span> <el-button size="medium" type="primary" @click="outLogin">退出登录</el-button>
      </p>
      <span class="logo"> <img src="../../assets/imges/logo.png" alt="" /></span>
      <ul>
        <li class="index" @click="goHome">首页</li>
        <li class="product" @click="goProduct">产品介绍</li>
        <li class="solution" @click="goSolution">解决方案</li>
      </ul>
    </div>
    <div class="contaier">
      <div class="goSolutionImg"><img src="../../assets/imges/1.png" alt="" /></div>
      <!-- 物联网硬件 -->
      <div class="hardware">
        <div class="hardware-header">
          <p v-if="diShow" class="detailsSwitchCk" @click="detailsS">
            <span class="detailsSwitch">收起详情</span>
          </p>
          <p v-if="openFlag" class="detailsSwitchCk" @click="detailsSwitchOpen">
            <span class="detailsSwitch">查看硬件详情</span>
          </p>
        </div>

        <div v-if="diShow" class="detailsSwitchDi">
          <div class="leftDi">
            <div class="leftDi_box">
              <div v-for="(item, index) in hardwareList" :key="item.id">
                <h2 @click="monitor(index, item.id)" :class="navIndex === index ? 'active1' : ''">{{ item.name }}</h2>
                <p :class="navIndex === index ? 'disHiden' : 'disHiden2'">{{ item.description }}</p>
                <!-- <p>{{ item.description }}</p> -->
              </div>
              <!-- <div>
                <h2 @click="campus()" :style="styleT">校园安全监测</h2>
                <p v-show="flagT">实时对校园进行安全监测，严控外来人员，保障校园师生人身安全，建设良好的安全校园环境。</p>
              </div>
              <div>
                <h2 @click="construction()" :style="styleS">智慧工地监测</h2>
                <p v-show="flagS">实时在线监测，预防施工隐患发生，保障施工安全，保证施工项目有序进行。</p>
              </div> -->
            </div>
          </div>
          <div class="rightDi">
            <div class="rightDiherd">
              <h2 class="sensor">硬件信息</h2>
              <div class="sensor_subject">
                <div class="fl"><img :src="imgSrc" alt="" /></div>
              </div>
            </div>
          </div>
        </div>
        <div class="hardware-container">
          <div class="saasText">
            <p class="saas">Saas云平台</p>
            <p class="saas1">提供全生命周期、一站式智能监测预警平台</p>
            <router-view />
          </div>
        </div>
      </div>
    </div>
    <div class="passImg fl"><img src="../../assets/imges/pass平台.png" alt="" /></div>
    <div class="footer">
      <img src="../../assets/imges/底部.png" alt="" />
    </div>
  </div>
</template>

<script>
// import { getCookie, delCookie } from '../login/cookies.js'
import base from '../../api/base.js'
export default {
  components: {},
  data() {
    return {
      hardwareList: [],
      imgSrc: '',
      activeName: '',
      flag: true,
      flagO: true,
      flagT: false,
      flagS: false,
      diShow: false,
      openFlag: true,
      userId: '',
      defaulteId: '',
      path: '',
      detailsSwitch: '查看硬件产品',
      detailsSwitch1: '收起详情',
      navIndex: 0,
      // navData: [
      //   { name: '住建行业', path: '/product/productJianZhu', imgSrc: require('../../assets/imges/建筑.png') },
      //   { name: '交通行业', path: '/product/productTraffic', imgSrc: require('../../assets/imges/交通行业.png') },
      //   { name: '环保行业', path: '/product/productEnvironmental', imgSrc: require('../../assets/imges/环保.png') },
      //   { name: '水利行业', path: '/product/productHydraulic', imgSrc: require('../../assets/imges/水利水电item.png') },
      //   { name: '自然资源', path: '/product/productNature', imgSrc: require('../../assets/imges/自然资源.png') },
      // ],
    }
  },
  // watch: {
  //   // 监听路由变化
  //   $route(to, from) {
  //     let ThisPage = to.name
  //     if (ThisPage === 'home' || ThisPage === 'healthcare' || ThisPage === 'healtharea' || ThisPage === 'personal') {
  //       this.footShow = true
  //     } else {
  //       this.footShow = false
  //     }
  //   },
  // },

  mounted() {},

  methods: {
    goHome() {
      this.$router.push({ name: 'Home' })
      this.openFlag = true
      this.diShow = false
    },
    goProduct() {
      this.$router.push({ name: 'productPublic' })
    },
    goSolution() {
      this.$router.push({ name: 'solution' })
      this.openFlag = true
      this.diShow = false
    },

    // routerLink(index, path) {
    //   // 点击哪个路由就赋值给自定义的下下标
    // },

    async monitor(index, industryId) {
      console.log(index, 'index')
      this.navIndex = index
      await this.$axios({
        method: 'get',
        url: `${base.baseUrlLz}/renren-admin/production/productinfo/getInfo/${industryId}`,
        // data: {
        //   //这里是发送给后台的数据
        //   username: this.phone,
        //   password: this.password,
        // },
      })
        .then((res) => {
          if (res.status === 200) {
            console.log(res.data, '硬件分类图')
            // this.hardwareList = res.data.data
            this.imgSrc = res.data.data[0].picturePath
            console.log(this.imgSrc)
          }
        })
        .catch()
    },

    construction() {
      this.flagO = false
      this.flagT = false
      this.flagS = true
      this.styleO = ''
      this.styleT = ''
      this.styleS = 'border-bottom: 4px solid #31adda'
    },
    detailsSwitchOpen() {
      console.log(this.hardwareList, 'this.hardwareList')
      if (this.hardwareList.length === 0) {
        console.log(1)
        this.diShow = false
        this.$message.error('硬件暂无数据')
      } else {
        console.log(1222)
        this.getData()
        this.diShow = true
        this.openFlag = false
      }
    },

    getData() {
      this.$axios({
        method: 'get',
        url: `${base.baseUrlLz}/renren-admin/production/productCategory/frontList`,
        // data: {
        //   //这里是发送给后台的数据
        //   username: this.phone,
        //   password: this.password,
        // },
      })
        .then((res) => {
          if (res.status === 200) {
            console.log(res, '硬件分类')
            this.hardwareList = res.data.data
            this.defaulteId = res.data.data[0].id
            this.monitor(0, this.defaulteId)
            if (res.data.data == []) {
              console.log(1)
              this.imgSrc = ''
            }
          }
        })
        .catch()
    },

    detailsS() {
      this.diShow = false
      this.openFlag = true
    },
    // detailsSwitch() {
    //   this.diShow = true
    //   this.detailsSwitch = '收起详情'
    // },
    // 跳转登录
    Inlogin() {
      this.$router.push({ name: 'login' })
    },
    // 退出登录
    outLogin() {
      localStorage.clear()
      this.flag = false
      this.$message({
        message: '已退出登录！',
        type: 'success',
      })
      this.$router.push({ name: 'Home' })
      // this.openFlag = false
      this.openFlag = true
      this.diShow = false
    },
  },
  activated() {
    console.log(localStorage.getItem('token'))
    // console.log(getCookie("password"))
    this.getData()
    if (localStorage.getItem('token')) {
      this.userId = localStorage.getItem('username')
      this.flag = true
    } else {
      this.$confirm('此网页需要登录才能操作', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$router.push({ name: 'login' })
        })
        .catch(() => {
          this.$router.go(-1)
        })
      this.flag = false
    }
  },
}
</script>

<style>
.passImg img {
  float: left;
}
.el-collapse {
  width: 150px;
  background: #f9fafb !important;
  float: right;
}
.fl {
  float: left;
}
.el-collapse-item__header {
  display: flex;
  align-items: center;
  height: 48px;
  line-height: 48px;
  background-color: #fff;
  color: #303133;
  cursor: pointer;

  font-size: 13px;
  font-weight: 500;
  transition: border-bottom-color 0.3s;
  outline: 0;
}
</style>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
/deep/#tab-home {
  width: 83px !important;
}
.contaier {
  width: 100%;
}
.detailsSwitchDi {
  display: flex;
}
.disHiden {
  display: block;
}
.disHiden2 {
  display: none;
}
.active1 {
  border-bottom: 4px solid #31adda;
}
.item > li > span {
  display: inline-block;
  width: 150px;
  height: 103px;
}
.jianzhu {
  background: url(../../assets/imges/建筑.png) -76px -31px no-repeat;
}

.detailsSwitchCk {
  cursor: pointer;
}
.traffic {
  background: url(../../assets/imges/交通行业.png) -76px -31px no-repeat;
}
.environmental {
  background: url(../../assets/imges/环保.png) -70px -31px no-repeat;
}
.hydraulic {
  background: url(../../assets/imges/水利水电item.png) -66px -31px no-repeat;
}
.rightDi {
  width: 1161px;
  height: 583px;
}
.rightDiherd {
  background: #f0f1f2;
  width: 1162px;
}
.rightDi .sensor {
  height: 61px;
  margin-left: 26px;
  width: 1162px;
  font-size: 22px;
  line-height: 61px;
  background: #f0f1f2;
  font-weight: 500;
  text-align: left;
  color: #000000;
}
.leftDi {
  width: 759px;
  height: 583px;
  position: relative;
  background: url(../../assets/imges/桥梁监测背景.png) no-repeat;
  background-size: 100%;
}
.leftDi_box {
  text-align: left;
  position: absolute;
  right: 50px;
}
.leftDi_box p {
  margin-top: 10px;
  width: 233px;
  margin-bottom: 40px;
}
.leftDi_box h2 {
  margin-top: 15px;
  width: 150px;
  line-height: 50px;
  cursor: pointer;
  text-align: center;
}

.leftDi_Nav {
  border-bottom: 4px solid #31adda;
}

.nature {
  background: url(../../assets/imges/自然资源.png) -74px -31px no-repeat;
}
.spanText {
  font-size: 16px;
  margin-right: 15px;
}
.product {
  border-bottom: 2px #31adda solid !important;
}
.logo {
  float: left;
  margin-right: 96px;
  margin-top: 8px;
}
.detailsSwitch {
  position: absolute;
  left: 900px;
  top: 120px;
  display: block;
  height: 50px;
  line-height: 50px;
  width: 128px;
  color: #31adda;
  cursor: pointer;
  font-size: 20px;
  font-family: Adobe Heiti Std R, Adobe Heiti Std R-R;
  font-weight: R;
  border-bottom: 3px #31adda solid !important;
}
.goSolutionImg {
  width: 100.25%;
}
.goSolutionImg img {
  margin-top: -7px;
}
/* ul {
  position: relative;
} */

ul li {
  float: left;
  display: block;
  list-style: none;
  cursor: pointer;
  width: 96px;
  height: 57px;
  opacity: 1;
  font-size: 16px;
  font-family: Noto Sans S Chinese Regular, Noto Sans S Chinese Regular-Regular;
  font-weight: 500;
  margin-left: 35px;
  text-align: center;
  line-height: 57px;
}

.footer {
}
.fr {
  float: right;
}
/deep/#tab-product {
  width: 100px !important;
}
/deep/#tab-solution {
  width: 83px !important;
}

.header {
  width: 95.5%;
  position: relative;
  padding: 0 45px;
  height: 59px;
  line-height: 57px;
  border-bottom: 1px solid #c1c1c1;
  margin-top: -7px;
  opacity: 1;
  background: rgba(215, 218, 219, 0.1);
}
img {
  width: 100%;
}

.loginBtn {
  position: absolute;
  right: 106px;
}

/deep/.el-tabs__nav-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  z-index: 1;
}
.hardware-header {
  position: relative;
  margin-top: -3px;
  height: 215px;
  text-align: center;
  background: url(../../assets/imges/物联网硬件.png) no-repeat;
}
.hardware-container {
  position: relative;
  height: 1050px;
  width: 100.3%;
  opacity: 1;
  background: #eff5f5;
}
.saasText {
  height: 100px;
  padding-top: 33px;
}
.saas {
  font-size: 30px;
  font-family: SourceHanSansCN Normal, SourceHanSansCN Normal-Normal;
  font-weight: Normal;
  text-align: center;
}
.sass1 {
  font-size: 20px;
  font-family: SourceHanSansCN Normal, SourceHanSansCN Normal-Normal;
  font-weight: 700;
  margin-top: 10px;
  color: #444444;
  text-align: center;
}
.item {
  position: absolute;
  left: 390px;
  text-align: center;
}
.item > li {
  float: left;
  list-style: none;
  font-size: 24px;
  font-family: SourceHanSansCN Normal, SourceHanSansCN Normal-Normal;
  font-weight: Normal;
  color: #000000;
  text-align: center;
  width: 230px;
  height: 168px;
  margin: 0px;
}
.container {
}
.item1 {
  position: absolute;
  left: 390px;
  top: 250px;
  text-align: center;
  margin-bottom: 160px;
}
.item1 .itemImg {
  margin-left: -25px;
}

.item1 .itemName {
  margin-top: -48px;
}
.item1 > li {
  float: left;
  list-style: none;
  font-size: 24px;
  font-family: SourceHanSansCN Normal, SourceHanSansCN Normal-Normal;
  font-weight: Normal;
  color: #000000;
  text-align: center;
  width: 215px;
  height: 70px;
  margin: 0px;
}
.item1 img {
  margin-top: -120px;
}
.nav_li {
  border-bottom: 4px solid #31adda;
}
.itemDetail {
  text-align: center;
  position: absolute;
  left: 300px;
  top: 360px;
}
.itemDetail1 {
  text-align: center;
  position: absolute;
  left: 300px;
  top: 660px;
  margin-top: 40px;
}
.top li {
  list-style: none;
  float: left;
  margin-left: 80px;
  cursor: pointer;
  text-decoration: none;
}
.bottom li {
  list-style: none;
  float: left;
  cursor: pointer;
  margin-left: 80px;
  text-decoration: none;
}

.leftDi > li {
  list-style: none;
}
</style>
